<template>
	<view class="login_contents">
		<view class="login_header">
			<image src="../../static/image/loginBg.png" mode="widthFix" class="loginBg"></image>
			<image src="../../static/image/logo.png" mode="widthFix" class="logo"></image>
			<view class="title">溢通环保补液管理平台</view>
		</view>
		<view class="logins">
			<view class="formbox">
				<view class="text">账号</view>
				<input placeholder="请输入账号" name="input" v-model="username"
					placeholder-class="placeholdercenter"></input>
				<view class="text">密码</view>
				<input placeholder="请输入密码" name="input" type="password" v-model="password"
					placeholder-class="placeholdercenter"></input>

				<checkbox-group class="block" @change="CheckboxChange">
					<view class="cu-form-group" style="justify-content: flex-start;">
						<checkbox :class="checkbox[0].checked?'checked round blue':'round blue'"
							:checked="checkbox[0].checked?true:false" value="1" style="transform:  scale(.7);">
						</checkbox>
						<view class="title text-gray">记住密码</view>
					</view>
				</checkbox-group>
				<button class="cu-btn block bg-blue margin-top-xl margin-bottom" style="padding: 40rpx 0;"
					@click="toIndex">登录</button>
				<checkbox-group class="block" @change="CheckboxChange2">
					<view class="cu-form-group" style="justify-content: center;min-height: auto;">
						<checkbox :class="checkbox1[0].checked?'checked round red':'round red'"
							:checked="checkbox1[0].checked?true:false" value="2" style="transform:  scale(.7);">
						</checkbox>
						<view class="title text-black" style="text-decoration: underline;" @click="toXIis">用户协议及隐私协议
						</view>
					</view>
				</checkbox-group>
				<text class="text-btm" @click="goForgotPwd">忘记密码？</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				token: '123',
				isSaveCode: false,
				isShowDev: false,
				tapTimes: 0,
				isSharer: false,
				checkbox: [{
					value: '1',
					checked: false
				}, ],
				checkbox1: [{
					value: '2',
					checked: false
				}, ],
				codeImg: '',
				key: '',
				code: '',
				username: '',
				password: '',
				openId: ''
			};
		},
		computed: {
			bntIsActive() {
				return this.username !== '' && this.password !== '';
			}
		},
		onLoad() {
			const token = uni.getStorageSync('token');
			const lastloginInfo = uni.getStorageSync('lastloginInfo');
			if (lastloginInfo) {
				this.username = lastloginInfo.username;
				this.password = lastloginInfo.password;
				this.isSaveCode = true;
			}
			this.token = token;
			this.lastTime = new Date().getTime();
		},
		onShow() {
			// this.getCode();
		},
		methods: {
			goForgotPwd(){
				uni.navigateTo({
				  url: './forgot-pwd' // 跳转到对应路径的页面
				});
			},
			toggle() {
				this.isSharer = !this.isSharer;
			},
			fastclick() {
				// 连续点击5次以上 显示开发调试环境
				var currentTime = Date.now();
				// 计算两次相连的点击时间间隔
				this.tapTimes = currentTime - this.lastTime < 300 ? this.tapTimes + 1 : 1;
				this.lastTime = Date.now();
				clearTimeout(this.timer);
				if (this.tapTimes > 4) {
					// 连续点击五次或者五次以上的点击事件
					this.isShowDev = true;
				}
				this.timer = setTimeout(() => {
					// 处理点击事件
					console.log(this.tapTimes);
					this.tapTimes = 0;
				}, 300 + 10);
			},
			radioChangeHandle(e) {
				this.$u.http.setConfig({
					baseUrl: e.detail.value
				});
			},
			checkboxChange(e) {
				console.log(e);
				if (e.detail.value.length > 0) {
					this.isSaveCode = true;
				} else {
					this.isSaveCode = false;
				}
			},
			async refillLogin(e) {
				if (this.lock) return;
				const {
					encryptedData,
					iv,
					userInfo
				} = e.detail;
				const {
					username,
					password,
					code
				} = this;
				if (username == '' || password == '') {
					return uni.showToast({
						title: '请输入账号和密码',
						icon: 'none'
					});
				}
				await this.wxLogin()
				uni.showLoading();
				this.lock = true;
				this.$http({
					url: this.$api.authUrl + 'ma/oauth/token',
					data: {
						username: username,
						password: this.$encodeMD5(password),
						code,
						iv,
						encryptedData,
						tenantId: '000003',
						grant_type: 'password',
						scope: 'all',
						type: 'account',
						openId: this.openId,
					},
					loading: 0
				}).then(res => {
					// 是否记住密码
					if (this.isSaveCode) {
						uni.setStorageSync('lastloginInfo', {
							username,
							password
						});
					} else {
						uni.removeStorageSync('lastloginInfo');
					}
					uni.showToast({
						title: '登录成功'
					});
					this.$store.commit('login', res.data);
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}, 888);
					this.lock = false;
				}).finally(() => {
					this.lock = false;
				});
				this.getCode();
			},
			getCode() {
				uni.login({
					success: res => {
						this.code = res.code;
					}
				});
			},
			wxLogin() {
				return new Promise((resolve, reject) => {
					uni.login({
						provider: 'weixin',
						success: rs => {
							this.$http({
								url: this.$api.authUrl + 'ma/wx/token',
								data: {
									code: rs.code
								},
								loading: 0,
								hideLoading: 0
							}).then(res => {

								this.openId = res.data.openid
								resolve(res)
							}).catch(err => {
								reject(err)
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">

	.login_contents {
		width: 750rpx;
		height: 100vh;
		background: #F5F5F5;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.login_header {
		width: 750rpx;
		height: 550rpx;
		// background: url(@/static/image/loginBg.png) no-repeat;
		background-size: contain;
		padding-top: 185rpx;
		position: relative;
		image.loginBg{
			width:750rpx;
			position:absolute;
			top: 0;
			left: 0;
		}
		.logo {
			width:248rpx;
			height:84rpx;
			margin: 0 auto;
			position:absolute;
			top:170rpx;
			left:250rpx;
		}
		.title {
			position:absolute;
			top:240rpx;
			left:0;
			width:100%;
			font-size: 32rpx;
			text-align: center;
			font-weight: bold;
			line-height: 120rpx;
		}
		
		
	}
	.logins {
		background: #fff;
		position: fixed;
		top: 460rpx;
		left: 0;
		width: 750rpx;
		border-radius: 30rpx 30rpx 0 0;

	}
</style>